<template>
<div class="content" ref="box">
  <my-button>测试文本MyButton插槽</my-button>
  <layout>
    <template v-slot:header>
      <h1>
        this is header
      </h1>
    </template>
    <template #footer>
      <h2>
        this is footer
      </h2>
      <h3>{{message}}</h3>

      <h1>{{date | dateForma}}</h1>
    </template>
  </layout>
</div>
</template>

<script>
import MyButton from "./components/MyButton"
import Layout from "./components/Layout"
export default {
  components:{
    MyButton,
    Layout
  },
  data(){
    return{
      message : "",
      date:"2020-8-25"
    }
  },
  mounted(){
    console.log(window.getComputedStyle(this.$refs.box).width)
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      setTimeout(() => {
        this.message = window.getComputedStyle(this.$refs.box).width
      },2000)
    }
  },
  filters:{
    dateForma(value){
      let dateTime = new Date(value);
      let year = dateTime.getFullYear();
      let month = dateTime.getMonth() + 1;
      let date = dateTime.getDate();
      return `${year}年${month}月${date}日`
    }
  }

}
</script>

<style>
.content{
  width: 1000px;
  height: 100px;
  background-color: #f00;
}
</style>
